//////////////////////////////添加动态加载效果:::源文档(可删除,留下作为参考)////////////////////////////
let io = new IntersectionObserver(
    function (entries) {
        /**
         * target: 被观察的目标元素，是一个 DOM 节点对象
         * isIntersecting: 是否进入可视区域
         * intersectionRatio: 相交区域和目标元素的比例值，进入可视区域，值大于0，否则等于0
         */
        // 如果不可见，就返回, 相当于一直调用loadItem(), 直到 #sentinels 出现在视窗位置
        if (entries[0].intersectionRatio > 0) {
            loadItem();
            console.log('Loaded new items');
        }
    });

// 开始观察
io.observe(
    document.querySelector('#sentinels')
);

/**
 * 指定加载Item
 * @count 数量, 一次加载多少个
 */
function loadItem() {
    let count = 8;
    let html = '', len = document.querySelectorAll('.diary_cover').length;
    for (let i = 0; i < count; i++) {
        html += '<div class="diary_item">' +
            '<div class="diary_cover">' +
            '<div class="cover">' +
            '<div class="cover_content">' +
            '<div class="title">我和玛利亚</div>' +
            '<div class="introduce">天天想你想你想你想你, 一想到你我就哦哦噢噢噢噢, 来碗大米酒</div>' +
            '<div class="archive"><i class="iconfont icon-guidang"></i>舔狗, 虐心, 扎心</div>' +
            '</div>' +
            '<div class="diary_info">' +
            '<div class="diary_statistics">' +
            '<span class="statistics_block">' +
            '<i class="iconfont icon-yuedu1"></i>1000' +
            '</span>' +
            '<span class="statistics_block">' +
            '<i class="iconfont icon-zan"></i>500' +
            '</span>' +
            '</div>' +
            '<div class="author">' +
            '<i class="iconfont icon-nanren1"></i>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>' +
            '</div>';
    }
    $('#search_content .content_area').eq(0).append(html);
    let $diaryCover = document.querySelectorAll('.diary_cover');
    for (let i = len; i < len + count; i++) {
        lazyLoad($diaryCover[i]);
    }
}


////////////////////////////////////diary下拉逐渐加载效果/////////////////////////////////////
// const con = document.querySelector('#container');
const imgs = document.querySelectorAll('.diary_cover');

const options = {
    // root属性指定目标元素所在的容器节点（即根元素）。注意，容器元素必须是目标元素的祖先节点。
    // root: con,
    // threshold属性决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]，
    // 即交叉比例（intersectionRatio）达到0时触发回调函数。
    // 比如，[0, 0.25, 0.5, 0.75, 1]就表示当目标元素 0%、25%、50%、75%、100% 可见时，会触发回调函数。
    threshold: 0.25,
    // 定义根元素的margin，用来扩展或缩小rootBounds这个矩形的大小，从而影响intersectionRect交叉区域的大小。
    // 它使用CSS的定义方法，比如10px 20px 30px 40px，表示 top、right、bottom 和 left 四个方向的值。
    // 这样设置以后，不管是窗口滚动或者容器内滚动，只要目标元素可见性变化，都会触发观察器。
    rootMargin: '0px'
};

/**
 * 采用 IntersectionObserver 低级优先级的监听来监听div('scroll-con)和目标元素(target=>img)是否出现交集的判断,
 * 触发回调, 将真实图片资源加载
 * @param target 目标DOM
 */
function lazyLoad(target) {
    // document.body.clientHeight; 视窗高度
    // console.log(cover.offsetHeight);
    // console.log(cover.offsetTop);
    const io = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const cover = entry.target;
                cover.classList.add('fadeIn');
                // loadItem();
                console.log('是的, 我要给你添加新元素搞事情了...');
                observer.disconnect();
            }
        });
    }, options);
    // 开始观察 target, 若是达到了 options 配置, 则触发
    io.observe(target);
}

imgs.forEach(lazyLoad);

////////////////////////////滚动监听/////////////////////////////

/**
 * 滚动监听
 */
window.onscroll = function () {
    let $sb = document.getElementsByClassName('system_briefing')[0];
    let sTop = document.documentElement.scrollTop;
    if (sTop > 150) {
        $sb.style.position = 'fixed';
        $sb.style.top = '55px';
        $sb.style.left = '0px';
        $sb.style.width = '100%';
    } else {
        $sb.style.position = 'relative';
        $sb.style.top = '0px';
    }
};


///////////////////////////////页面title效果/////////////////////////////////
let OriginTitle = document.title;
let st;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        document.title = "(つェ⊂)死鬼! 又跑哪里去了";
        clearTimeout(st);
    } else {
        document.title = '(*´∇｀*)吖~欢迎回来~ ' + OriginTitle;
        st = setTimeout(function () {
            document.title = OriginTitle;
        }, 4000);
    }
});